<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_盒子模型内间距与边框</title>
    <style>
        .z1{
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border: 5px solid green;
            border-bottom: 15px solid purple;
            margin-bottom: 30px;
        }
        .z2{
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
            border-radius: 20px;
            border-radius: 100px;
            margin-bottom: 30px;
        }
        .z3{
            width: 200px;
            height:60px;
            background-color: lightblue;
            border-radius: 30px;
        }
        .z4{
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*默认的盒子模型计算方案:无论是加内间距还是边框都会让元素变大！*/
            border:10px solid red;
            padding:20px;
            /*注意：外间距不输入元素本身的大小！*/
            margin: 50px;
            /*切换盒子模型的计算方案：为边框盒子
            效果：将“内间距+边框+内容”的总大小都算在预设的宽高之内！靠压缩内容的大小来实现
            注意：此方案必须要右预设的宽高！否则无法生效！*/
            box-sizing: border-box;

        }
        .z5{
            background-color: yellow;
            width: 150px;
            height: 50px;
            padding: 50px 20px 0;
            border: 10px solid red;
            border-bottom: 5px solid red;
            margin: 20px 50px 0;
            /* 切换盒子模型计算方案后,使用预设的宽高 */
            /*box-sizing: border-box;*/
        }

    </style>

</head>
<body>
    <div class = "fu">
        <div class = "z1"></div>
        <div class = "z2"></div>
        <div class = "z3"></div>
        <div class = "z4"></div>
        <div class = "z5"></div>
    </div>
</body>
</html>